<template>
	<view class="add-bank-rich">
		<view class="tip">请绑定账户实名认证本人的银行卡</view>
		<u-form class="add-bank-form-rich" :model="form" ref="uForm" label-width="150"
			:label-style="{ color: 'rgb(0, 167, 255)' }">
			<u-form-item prop="name" label="持卡人:"><u-input v-model="form.name" placeholder="请输入持卡人姓名" /></u-form-item>
			<u-form-item prop="cardNo" label="银行卡号:"><u-input v-model="form.cardNo"
					placeholder="请输入本人银行卡号" /></u-form-item>
			<u-form-item prop="bank" label="银行名称:"><u-input v-model="form.bank" disabled
					placeholder="银行名称" /></u-form-item>
			<u-button class="form-btn" :ripple="true" type="primary" @click="submit">提交</u-button>
		</u-form>
		<u-modal v-model="show" @confirm="confirm" :title="null" ref="uModal" @cancel="cancel" cancel-text="继续新增"
			confirm-text="返回银行列表" show-cancel-button>
			<view class="slot-content">新增银行卡成功！</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					name: '',
					cardNo: '',
					bank: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入持卡人姓名',
						trigger: ['change', 'blur']
					}],
					cardNo: [{
						type: 'number',
						required: true,
						message: '请输入本人银行卡号',
						trigger: ['blur'],
						asyncValidator: (rule, value, callback) => {
							if (value) {
								this.$request('/order/mall/userBankCard/getBankName', {
									bankCardNumber: value
								}, 'post').then((res) => {
									if (!res.businessSuccess) {
										callback(new Error(res.errorMessage || '银行卡号验证失败'));
									} else {
										this.form.bank = res.data || '其他';
										callback();
									}
								});
							}
						}
					}]
				}
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			addCard() {
				this.$request('/order/mall/userBankCard/addBankCard', {
					bankCardNumber: this.form.cardNo,
					bankCardName: this.form.name,
					bank: this.form.bank
				}, 'post').then((res) => {
					if (res.businessSuccess) {
						this.show = true;
					} else {
						uni.showToast({
							title: res.errorMessage,
							icon: 'none'
						});
					}
				});
			},
			submit() {
				this.$refs.uForm.validate((valid) => {
					if (valid) {
						console.log('验证通过');
						this.addCard();
					} else {
						console.log('验证失败');
					}
				});
			},
			confirm() {
				uni.navigateTo({
					url: '/pagesMy/bank/bank'
				});
			},
			cancel() {
				this.form = {
					name: '',
					cardNo: '',
					bank: ''
				};
			}
		}
	};
</script>

<style lang="less" scoped>
	.add-bank-rich {
		padding: 20rpx 30rpx 60rpx;

		.add-bank-form-rich {
			padding: 20rpx 40rpx 60rpx;
			position: relative;
			box-shadow: 0px 0px 12px 0px rgba(99, 53, 204, 0.1);
			border-radius: 20rpx;
			background-color: rgb(255, 255, 255);

			.form-btn {
				border-radius: 40px;
				background-image: linear-gradient(180deg, rgb(69, 207, 255) 0%, rgb(65, 152, 248) 100%);
				box-shadow: 0px 3px 10px 0px rgba(38, 154, 255, 0.3);
				position: absolute;
				bottom: -130rpx;
				margin: auto;
				left: 0;
				right: 0;
				width: 95%;

			}
		}

		.tip {
			color: rgb(0, 167, 255);
			height: 90rpx;
			line-height: 90rpx;
		}
	}

	.slot-content {
		padding-top: 200rpx;
		color: #666;
		position: relative;
		text-align: center;
		margin: 30rpx 0;


		&::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: -20rpx;
			margin: auto;
			width: 250rpx;
			height: 180rpx;
			background: url(./bank_success.png) center/contain no-repeat;
		}
	}
</style>